<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="main-box w100 flex-row-center" style="display: flex;height: 100vh;">
		<view class="head-box">
			<!-- 搜索 -->
		<!-- 	<view class="search-box">
				<up-search placeholder="请输入搜索名称" height="72rpx" placeholderColor="#C0CCCF" searchIconColor="#C0CCCF"
					bgColor="rgba(255,255,255,0.2)" :inputStyle="inputStyle" style="" :showAction='false'
					v-model="keyword"></up-search>
			</view> -->
			<!-- tab -->
			<view class="tab-box">
				<up-tabs @change="changeTab" :activeStyle="{
						'fontWeight': 'bold',
						'fontSize': '30rpx',
						'color': 'rgba(255,255,255,0.87)'
					}" lineColor="linear-gradient( 270deg, #7EDE9E 0%, #66DEC2 47%, #5CCCC0 100%)" :inactiveStyle="{
					 	'fontWeight': 500,
					 	'fontSize': '30rpx',
					 	'color': 'rgba(255,255,255,0.6)'
					 }" :list="tabList"></up-tabs>
			</view>
		</view>
		<!-- 内容 style="margin-top: 426rpx;" -->
		<view class="main-content w100" style="flex-grow: 1;">
			<scroll-view :scroll-top="scrollTop" @refresherrefresh="onRefresh" refresher-default-style="white"
				@scrolltolower="scrolltolower" :refresher-enabled="true" @refresherpulling="onPpulling" scroll-y="true"
				@refresherrestore="onRestore" :refresher-triggered="groupInfo.triggered"
				style="width: 100%;height: 100%;" class="scroll-Y">
				<view class="list-head flex-row-center">
					<!-- 		<view class="sort-box flex-center">
						<text class="sort">排序</text>
						<image src="../../static/main/sort_icon.png" class="sort_icon" mode=""></image>
					</view> -->
					<!-- tab -->
					<view class="subsection-box flex-center">
						<view @click="changeSubsection(item,index)"
							:class="[item.label==subsectionIndex.type?'active-item':'subsection-item' , 'flex-center mar-l']"
							v-for="(item,index) in subsectionList" :key="index">
							<text class="text">{{item.name}}</text>
						</view>
					</view>
				</view>
				<!-- list -->
				<view class="team-list">
					<template v-if="itemLoading">
						<view class="team-list-item" v-for="num in 3" :key="num">
							<uv-skeletons loading :skeleton="skeleton"></uv-skeletons>
						</view>
					</template>
					<template v-else>
						<template v-if="groupInfo.list.length>0">
							<teamItem :teamInfo="item" v-for="(item,index) in groupInfo.list" :key="item.t_id">
							</teamItem>
							<view class="view-more">
								<up-loadmore :status="groupInfo.status" />
							</view>
						</template>
						<view class="not-list-view" v-else>
							<text class="text">暂无相关类型数据~</text>
						</view>
					</template>

				</view>
			</scroll-view>
		</view>
		<view class="change-btn flex-center" @click="toTeam">
			<up-icon name="plus" color="#0A534F" size="42rpx"></up-icon>
		</view>
	</view>
</template>

<script setup>
	import {
		getLocationInf
	} from '@/utils/getLocation.js';
	import {
		themeStore
	} from '@/stores/theme.js';
	import {
		chooseLocation
	} from '@/utils/chooseLocation';
	import {
		userInfoStore
	} from '@/stores/user';
	import tabbarContentVue from '@/components/tabbarContent/tabbarContent.vue';
	import teamItem from '@/components/main/teamItem.vue';
	import {
		handleDistance,
		countDown,
		isMillisecondTimestamp,
		parseURLParams3
	} from '@/utils/utools.js';
	import {
		configInfoStore
	} from '@/stores/config.js';
	import {
		inviteInfoStore
	} from '@/stores/inviteInfo';
	const inviteStore = inviteInfoStore();
	const configStore = configInfoStore();
	const skeleton = [{
			type: 'flex',
			num: 1,
			style: 'alignItems: center',
			children: [{
				type: 'custom',
				num: 1,
				style: 'width:68rpx;height:68rpx;marginRight: 16rpx;borderRadius:50%;'
			}, {
				type: 'line',
				num: 1,
				style: 'width:100%;',
			}]
		},
		{
			type: 'flex',
			num: 1,
			style: 'marginTop:24rpx;marginBottom:24rpx;display:flex;',
			children: [{
					type: 'custom',
					num: 1,
					style: 'width:226rpx;height:226rpx;borderRadius:16rpx;marginRight: 34rpx;'
				},
				{
					type: 'line',
					num: 3,
					gap: '20rpx'
				},

			]
		}, {
			type: 'line',
			num: 1,
			gap: '20rpx'
		}
	]
	const userStore = userInfoStore();
	const theme = themeStore();
	const inputStyle = {
		color: '#C0CCCF'
	};
	const status = ref('loading');
	const itemLoading = ref(true);
	const addressInfo = computed(() => userStore.addressInfo);
	let tabLists = [{
		name: '全部',
		label: 0
	}]
	const tabList = ref(computed(() => userStore.level_info?.tabList || tabLists));
	const subsectionList = [{
			name: '最新',
			label: 1
		},
		{
			name: '最近',
			label: 2
		},
	];
	const groupInfo = reactive({
		list: [],
		page: 1,
		status: 'loadmore',
		triggered: false,
	})

	const keyword = ref('');
	const noticeInfo = ref(null);
	const noticeShow = ref(false);
	const subsectionIndex = reactive({
		level: 0, //等级，默认全部
		type: 1, //最近，最新
	});
	const statusBarHeight = ref(0);
	const scrollTop = ref(0.01);
	const toPayment = () => {
		uni.navigateTo({
			url: '/pages/payment/payment'
		})
	}
	onLoad(async (option) => {
		getAddressInfo();
	})
	onShow(() => {
		// addressInfo.value = userStore.addressInfo;
	})
	const onRefresh = () => { //下拉刷新
		if (groupInfo.triggered) return;
		groupInfo.triggered = true;
		restList();
	}
	const scrolltolower = () => { //触底了
		getMoreList();
	}
	const getMoreList = () => {
		if (groupInfo.status === 'nomore' || groupInfo.status === 'loading') return;
		groupInfo.status = 'loading';
		setTimeout(() => {
			getmainGroupList();
		}, 300)
	}
	const getmainGroupList = async (lat, lng) => { //获取组队列表
		const res = await $Api.group.getmainGroupList({
			page: groupInfo.page,
			type: subsectionIndex.type,
			level: subsectionIndex.level,
			lat: addressInfo.value?.latitude,
			lng: addressInfo.value?.longitude
		})
		setTimeout(() => { //重置下拉刷新
			itemLoading.value = false;
			groupInfo.triggered = false;
		}, 800)
		if (res.code === 1) {

			if (res.data.list && res.data.list.length > 0) {
				let arr = [];
				arr = res.data.list.map(val => {
					let imageList = [];
					let fristName = '北';
					let countDownInfo = {
						status: -1,
						timeInfo: {}
					}
					if (val.juli) {
						val.juli = handleDistance(val.juli);
					}
					if (val.image) {
						if (typeof val.image === 'string') {
							imageList = val.image.split(',');
						} else if (Array.isArray(val.image)) {
							val.image.forEach(item => {
								imageList.push(item.url);
							})
						}
					};
					if (val.nickname) {
						fristName = val.nickname.charAt(0)
					}
					countDownInfo = computeDate(val.start_date, val.end_date)
					return {
						...val,
						imageList: imageList,
						fristName,
						countDownInfo
					}
				})
				groupInfo.list = [...groupInfo.list, ...arr];
			}
			if (res.data.totalPage > groupInfo.page) {
				groupInfo.status = 'loadmore';
				groupInfo.page++;
			} else {
				groupInfo.status = 'nomore';
			}
			// console.log('groupInfo.list', groupInfo.list);
		} else {
			setTimeout(() => {
				groupInfo.triggered = false;
			}, 800)
			uni.$u.toast(res.msg);
		}
	};
	const computeDate = (startDate, endDate) => {
		if (!isMillisecondTimestamp(startDate)) { //判断毫秒级时间戳
			startDate = startDate * 1000
		}
		if (!isMillisecondTimestamp(endDate)) { //判断毫秒级时间戳
			endDate = endDate * 1000
		}
		let newDate = new Date().getTime();
		if (newDate > endDate) { //已经结束
			return {
				status: -1,
				timeInfo: {}
			}
		} else if (newDate > startDate && newDate <= endDate) { //进行中，距结束多少时间
			let obj = {}
			obj = countDown(endDate);
			return {
				status: 1,
				...obj
			}
		} else if (newDate <= startDate) { //未开始 距开始多少时间
			let obj = {}
			obj = countDown(startDate);
			return {
				status: 2,
				...obj
			}
		}
	}

	const closeShow = () => {
		noticeShow.value = false;
		noticeInfo.value = null;
	}
	const toTeam=()=>{
		uni.navigateTo({
			url:'/page_user/views/initiateTeam'
		})
	}
	const toNotice = () => {
		uni.navigateTo({
			url: "/page_user/views/noticeList"
		})
	}
	const changeSubsection = (item, index) => { //切换Subsection
		if (subsectionIndex.type === item.label) return;
		subsectionIndex.type = item.label;
		groupInfo.triggered = false; //关闭下拉刷新
		restList();
	}
	const changeTab = (e) => {
		subsectionIndex.level = e.label;
		groupInfo.triggered = false; //关闭下拉刷新
		restList();
	}
	const restList = () => { //重置列表
		groupInfo.list = [];
		groupInfo.page = 1;
		groupInfo.status = 'loadmore';
		itemLoading.value = true;
		if (scrollTop.value == 0.01) { //执行滚动
			scrollTop.value = 0.011
		} else {
			scrollTop.value = 0.01;
		}
		getmainGroupList();
	}

	const getAddressInfo = async () => { //获取当前位置信息
		if (addressInfo.value) {
			getmainGroupList();
		}

	}
	const chooseLocationTap = async () => { //选择地理位置
		// userStore.setAddressInfo();
		const res = await chooseLocation(userStore.addressInfo?.latitude, userStore.addressInfo?.longitude);
		if (res.districtInfo) {
			userStore.addressInfo = res;
			restList();
		}
	}
	watch(() => userStore.addressInfo, (newVal) => {
		// console.log('地址信息变化了', newVal);
	})
</script>
<style lang="scss">
	.u-search__content__input {
		background-color: transparent !important;
	}
</style>
<style lang="scss" scoped>
	.head-title {
		height: 76rpx;
		box-sizing: border-box;
		padding: 0 40rpx;

		.title {
			font-weight: 800;
			font-size: 44rpx;
			color: #FFFFFF;
		}

		.address-box {
			margin-left: 30rpx;

			.address {
				max-width: 178rpx;
				height: 36rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.87);
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				margin: 0 6rpx;
			}
		}
	}

	.search-box {
		width: 100%;
		box-sizing: border-box;
		margin: 20rpx 0;
		padding: 0 14rpx;
	}

	.tab-box {
		padding: 0 20rpx;
	}

	.list-head {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;

		// justify-content: flex-end;
		.sort-box {
			.sort {
				font-weight: bold;
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.87);
				margin-right: 8rpx;
			}

			.sort_icon {
				width: 26rpx;
				height: 24rpx;
			}
		}

		.subsection-box {
			.mar-l {
				margin-left: 26rpx;
			}

			.subsection-item {
				width: 108rpx;
				height: 48rpx;
				background: rgba(255, 255, 255, 0.15);
				border-radius: 24rpx;

				.text {
					font-weight: bold;
					font-size: 28rpx;
					color: rgba(255, 255, 255, 0.5);
				}
			}

			.active-item {
				width: 108rpx;
				height: 48rpx;
				// background: linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);
				background: $btn-bg-color;
				border-radius: 24rpx;

				.text {
					font-weight: bold;
					font-size: 28rpx;
					// color: #DEDEDE;
					color: $btn-text-color;
				}
			}
		}
	}

	.team-list {
		box-sizing: border-box;
		width: 100%;
		padding: 0 20rpx;
		// margin-top: 24rpx;
		margin-top: 12rpx;
	}

	.main-box {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.main-content {
		display: flex;
		// transform: translateY(-48rpx);
		// height: calc(100% + 48rpx);
		overflow: hidden;
		flex: 1;
	}

	.head-box {
		width: 100%;
		// height: 426rpx;
		padding-bottom: 18rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		z-index: 99;
	}

	.team-list-item {
		margin-bottom: 16rpx;
	}

	.notice-content {
		width: 480rpx;
		padding: 20rpx 18rpx;
		background-color: #222528;
		border-radius: 16rpx;
		flex-direction: column;
		justify-content: space-between;

		.name {
			color: $title-color;
			font-size: 32rpx;
			box-sizing: border-box;
			text-align: center;
		}

		.notice-box {
			margin-top: 24rpx;


			.scroll-Y {
				width: 100%;
				max-height: 40vh;
			}

			.title {
				color: $title-color;
				font-size: 26rpx;
			}
		}

		.content {
			color: $description-color !important;
			font-size: 24rpx !important;
			margin-top: 32rpx;
			line-height: 32rpx !important;
		}

		.time {
			align-self: flex-end;
			color: $description-color;
			font-size: 24rpx;
			margin-top: 32rpx;

		}

		.content-box {
			flex-direction: column;
		}

		.notice-btn {
			width: 180rpx;
			height: 54rpx;
			background: $btn-bg-color;
			border-radius: 27rpx;
			color: $btn-text-color;
			font-size: 24rpx;
			text-align: center;
			line-height: 54rpx;
			margin-top: 24rpx;
		}
	}

	.change-btn {
		width: 86rpx;
		height: 86rpx;
		background: $attention-color;
		border-radius: 50%;
		position: fixed;
		bottom: 240rpx;
		right: 40rpx;
		z-index: 9999;
	}
</style>

<style>
	/deep/ .u-tabs__wrapper__nav {
		justify-content: space-between;
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: 0;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
	}
</style>